<!-- 市区选择功能测试页面 -->
<template>
  <view class="min-h-screen bg-gray-50 p-6">
    <!-- 页面标题 -->
    <view class="mb-8">
      <text class="text-[36rpx] font-bold text-gray-900 text-center">市区选择功能测试</text>
    </view>

    <!-- 测试区域 -->
    <view class="bg-white rounded-2xl p-6 shadow-sm mb-6">
      <view class="text-[32rpx] font-semibold text-gray-900 mb-4">省市选择测试</view>
      <view class="text-[24rpx] text-gray-500 mb-6">
        测试市区选择组件的完整功能，包括选择确认和取消操作
      </view>
      
      <CityPicker
        mode="city"
        placeholder="请选择服务区域"
        title="选择服务区域"
        @confirm="handleRegionConfirm"
        @cancel="handleRegionCancel"
      />
      
      <!-- 显示选择结果 -->
      <view v-if="selectedRegion" class="mt-4 p-4 bg-blue-50 rounded-xl border border-blue-200">
        <view class="flex items-center mb-2">
          <IconFont name="check-circle" class="text-blue-600 mr-2" size="24rpx" />
          <text class="text-[24rpx] text-blue-600 font-medium">选择结果：</text>
        </view>
        <view class="text-[26rpx] text-blue-800">
          <text v-if="selectedRegion.province" class="block">
            省份：{{ selectedRegion.province.name }} ({{ selectedRegion.province.code }})
          </text>
          <text v-if="selectedRegion.city" class="block">
            城市：{{ selectedRegion.city.name }} ({{ selectedRegion.city.code }})
          </text>
        </view>
      </view>
    </view>

    <!-- 功能说明 -->
    <view class="bg-white rounded-2xl p-6 shadow-sm">
      <view class="text-[32rpx] font-semibold text-gray-900 mb-4">功能说明</view>
      <view class="space-y-3">
        <view class="flex items-start">
          <view class="w-[24rpx] h-[24rpx] bg-blue-500 text-white rounded-full flex items-center justify-center text-[16rpx] font-bold mr-3 mt-1 flex-shrink-0">
            1
          </view>
          <text class="text-[26rpx] text-gray-700 flex-1">点击选择器打开省市选择弹窗</text>
        </view>
        <view class="flex items-start">
          <view class="w-[24rpx] h-[24rpx] bg-blue-500 text-white rounded-full flex items-center justify-center text-[16rpx] font-bold mr-3 mt-1 flex-shrink-0">
            2
          </view>
          <text class="text-[26rpx] text-gray-700 flex-1">先选择省份，再选择城市</text>
        </view>
        <view class="flex items-start">
          <view class="w-[24rpx] h-[24rpx] bg-blue-500 text-white rounded-full flex items-center justify-center text-[16rpx] font-bold mr-3 mt-1 flex-shrink-0">
            3
          </view>
          <text class="text-[26rpx] text-gray-700 flex-1">点击确认完成选择，或点击取消关闭弹窗</text>
        </view>
        <view class="flex items-start">
          <view class="w-[24rpx] h-[24rpx] bg-blue-500 text-white rounded-full flex items-center justify-center text-[16rpx] font-bold mr-3 mt-1 flex-shrink-0">
            4
          </view>
          <text class="text-[26rpx] text-gray-700 flex-1">选择结果会显示在下方，包含省份和城市的详细信息</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { IconFont } from '@nutui/icons-vue-taro'
import Taro from '@tarojs/taro'
import CityPicker from './CityPicker.vue'

/**
 * 选择结果类型定义
 */
interface SelectionResult {
  province?: {
    code: string
    name: string
    level: number
    parentCode?: string
  }
  city?: {
    code: string
    name: string
    level: number
    parentCode?: string
  }
}

// 响应式数据
const selectedRegion = ref<SelectionResult | null>(null)

/**
 * 处理市区选择确认
 * @param result 选择结果
 */
const handleRegionConfirm = (result: SelectionResult) => {
  selectedRegion.value = result
  
  console.log('选择的区域:', result)
  
  // 显示选择结果提示
  let message = ''
  if (result.city) {
    message = `已选择：${result.province?.name} ${result.city.name}`
  } else if (result.province) {
    message = `已选择：${result.province.name}`
  }
  
  if (message) {
    Taro.showToast({
      title: message,
      icon: 'success',
      duration: 2000
    })
  }
}

/**
 * 处理市区选择取消
 */
const handleRegionCancel = () => {
  console.log('取消区域选择')
  Taro.showToast({
    title: '已取消选择',
    icon: 'none',
    duration: 1500
  })
}
</script>
